<template>
  <div class="project-manage-page pd16" v-loading="pageLoading">
    <el-card class="box-card">
      <div class="btn-group">
        <el-button type="primary" @click="addProduct">新建产品</el-button>
      </div>

      <div class="data-block mt16">
        <div class="product-block">
          <el-scrollbar>
          <div v-if="productData.length === 0" class="empty-pro">
            <e-icon type="MessageBox" :size="40"></e-icon>
            <div class="empty-text">
              没有数据
            </div>
          </div>
          <template v-else>
            <div v-for="(item, index) in productData" class="product-item" :key="index">
              <div class="product-post" :style="bgImg(item)"></div>
              <div class="product-content pd16">
                <div class="name">{{item.name}}</div>
                <div class="info">{{item.mode}}</div>
                <div class="btn">
                  <span class="total">{{item.total}}台</span>
                  <span>
                    <el-button type="primary" @click="handleEdit(item)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(item)">删除</el-button>
                  </span>
                </div>
              </div>
            </div>
          </template>
          </el-scrollbar>
        </div>
      </div>
      <div class="page-right-block">
        <el-pagination
          class="nr-page"
          v-model:current-page="searchParams.currentPage"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="searchParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <product-modify-form
      :dialogVisible="modifyFormVis"
      :formStatus="modifyFormStatus"
      :formData="productFormData.data"
      @update:dialogVisible="(value: boolean) => modifyFormVis = value"
      @submit="getProductData">
    </product-modify-form>
  </div>
</template>

<script setup lang="ts" name="ProjectManage">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import EIcon from '@/components/e-icon/e-icon.vue'
import ProductModifyForm from './product-modify-form.vue'
import ProductImg from '@/assets/images/product.png'
import { productListPage, productDelete } from '@/api/product-manage'

const pageLoading = ref(false)
const searchParams = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const productData = ref<any>([])
const modifyFormVis = ref(false)
const modifyFormStatus = ref(0)
const productFormData = ref({
  data: {}
})

onMounted(() => {
  getProductData()
})

// 分页跳转
const handleCurrentChange = (val: number) => {
  getProductData()
}
const handleSizeChange = (val: number) => {
  getProductData()
}

// 图片
const bgImg = (row: any) => {
  return {
    background: `url(${row.poster})`,
    backgroundSize: 'cover'
  }
}

// 新增
const addProduct = () => {
  modifyFormVis.value = true
  modifyFormStatus.value = 0
}

// 编辑
const handleEdit = (row: any) => {
  modifyFormVis.value = true
  modifyFormStatus.value = 1
  productFormData.value.data = Object.assign({}, row)
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除【${row.name}】此产品吗？`,
    '系统提示',
    {
      type: 'warning',
    }
  )
  .then(() => {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
    let params = {
      productId: row.productId
    }
    productDelete(params).then((res: any) => {
      if (res.code === 0) {
        ElMessage.success(`删除成功！`)
        getProductData()
      } else {
        ElMessage.error(`${res.msg}`)
      }
    }).catch(err => {
      console.log(err)
    })
  })
  .catch(() => {})
}

// 获取产品表格数据
const getProductData = async () => {
  let params = {
    currentPage: searchParams.currentPage,
    pageSize: searchParams.pageSize
  }
  pageLoading.value = true
  await productListPage(params).then((res: any) => {
    if (res.code === 0) {
      productData.value = [...res.list]
      searchParams.total = res.page.totalSize
    } else {
      ElMessage.error(`${res.msg}`)
    }
  }).catch(err => {
    console.log(err)
  })
  pageLoading.value = false
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.project-manage-page
  height 100%
  .box-card
    height 100%
    &:deep(.el-card__body)
      height 100%
      box-sizing border-box
      position relative
  .data-block
    position absolute
    bottom 64px
    top 52px
    left 0px
    right 0px
    // overflow-y auto
    // padding 0px 20px
  .empty-pro
    text-align center
    color #888
    padding 16px 0px
    box-sizing border-box
    .empty-text
      font-size 14px
  .product-block
    margin 0px 0px -16px -8px
    // max-width 1366px
    height 100%
    overflow-y auto
    // padding 0px 10px
    .el-scrollbar
      padding 0px 20px
      box-sizing border-box
  .product-item
    border 1px solid #ddd
    display inline-block
    border-radius 4px
    width 250px
    margin 0px 8px 16px
    .product-post
      height 150px
    .product-content
      border-top 1px solid #ddd
    .name
      font-weight bold
      height 22px
      line-height 22px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .info
      color #aaa
      font-size 14px
      margin-top 10px
      height 16px
      line-height 16px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .btn
      margin-top 10px
      display flex
      align-items baseline
      justify-content space-between
      .total
        color var(--el-color-primary)
</style>
